<template>
	<view>
		<page-header>H1802平台</page-header>
		<!--轮播图 -->
		<swiper v-bind:style="{height:imgHeight }" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" class="topSwiper" :circular="circular">
			<swiper-item>
				<image src="../../static/banner1.png" mode="widthFix" @load="imgLoad"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/banner2.png" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/banner3.png" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/banner4.png" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="nine-grid">
			<view class="grid-item" data-url="/pages/queryScore/queryScore" @tap="gridDetail($event)">
				<image src="../../static/chenjiQuery.png" mode="widthFix"></image>
				<text>成绩查询</text>
			</view>
			<view class="grid-item" @tap="gridDetail($event)">
				<image src="../../static/message.png" mode="widthFix"></image>
				<text>我的信息</text>
			</view>
			<view class="grid-item" @tap="gridDetail($event)" data-url="/pages/changePwd/changePwd">
				<image src="../../static/password.png" mode="widthFix"></image>
				<text>修改密码</text>
			</view>
			<view class="grid-item" @tap="gridDetail($event)" data-url="/pages/stuList/stuList">
				<image src="../../static/tongxunlu.png" mode="widthFix"></image>
				<text>我的同学</text>
			</view>
			<view class="grid-item" @tap="gridDetail($event)">
				<image src="../../static/upload.png" mode="widthFix"></image>
				<text>上传作业</text>
			</view>
			<view class="grid-item" @tap="gridDetail($event)">
				<image src="../../static/more.png" mode="widthFix"></image>
				<text>更多</text>
			</view>
		</view>	
		<!--消息提示 -->
		<view class="tips">
			<text>消息：</text><text class="msg">当前版本测试中...</text>
		</view>
		<!--软帝新闻 -->
		<softeem-news-list></softeem-news-list>
	</view>
</template>

<script>
	import pageHeader from "../../components/pageHeader.vue";
	import softeemNewsList from "../../components/softeemNewsList.vue";
	export default {
		name:"main",
		data(){
			return{
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 1000,
				circular: true,
				imgHeight:""        //图片的高度
			}
		},
		onLoad:function(){
			uni.setNavigationBarTitle({
				title:"H1802"
			});
		},
		components:{
			pageHeader,softeemNewsList
		},
		methods:{
			gridDetail(e){
				let url=e.currentTarget.dataset.url;
				if(url==undefined||url==null){
					uni.showToast({
						title:"功能正在开发中",
						icon:"none"
					});
					return;
				}
				
				uni.navigateTo({
					url:url
				});
				
			},
			//通过图片的加载事件，保证图片的宽度高度比
			imgLoad(event){
				console.log("图片加载");
				var imgWidth=event.detail.width;
				var imgHeight=event.detail.height;
				var screenWidth=uni.getSystemInfoSync().screenWidth;
				this.imgHeight=imgHeight*(screenWidth/imgWidth)+"px";
				console.log(this.imgHeight);
			}
		},
	}
</script>

<style>
.nine-grid{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	background-color: white;
	padding: 20px;
	box-sizing: border-box;
}
.grid-item{
	width: 33%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20px;
}
.grid-item>image{
	width: 100%;
	max-width: 64px;
	height: auto;
	display: block;
}
.grid-item>text{
	font-size: 24px;
}
.tips{
	height: 60px;
	font-size: 24px;
	color: gray;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	padding: 0px 20px;
	background-color: white;
	margin: 10px 0px;
}
.tips>text{
	font-weight: bold;
	color: #2FA3DF;
}
.tips>text.msg{
	font-weight: normal;
	color: gray;
	animation: message 2s 1s ease infinite;
}
@keyframes message{
	0%{
		color: gray;
	}
	50%{
		color: red;
	}
	100%{
		color: gray;
	}
}
.topSwiper image{
	width: 100%;
	height: auto;
}


</style>
